<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7"><![endif]-->
<!--[if IE 8]>
<html class="ie ie8"><![endif]-->
<!--[if IE 9]>
<html class="ie ie9"><![endif]-->
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="Nghia Minh Luong">
<meta name="keywords" content="Default Description">
<meta name="description" content="Default keyword">
<title>合租|拼车</title>
<!-- Fonts-->
<link rel="stylesheet" th:href="@{/static/css/fontsgoogleapis.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/font-awesome/css/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/static/plugins/ps-icon/style.css}">
<!-- CSS Library-->
<link rel="stylesheet"
	th:href="@{/static/plugins/bootstrap/dist/css/bootstrap.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/owl-carousel/assets/owl.carousel.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/slick/slick/slick.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/bootstrap-select/dist/css/bootstrap-select.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/Magnific-Popup/dist/magnific-popup.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/jquery-ui/jquery-ui.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/settings.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/layers.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/navigation.css}">
<!-- Custom-->
<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"
	media="all">
<link rel="stylesheet" th:href="@{/static/css/style.css}">

<link rel="stylesheet" th:href="@{/static/css/rentCar.css}">


<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript"
	th:src="@{/static/plugins/jquery/dist/jquery.min.js}"></script>
<!--HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries-->
<!--WARNING: Respond.js doesn't work if you view the page via file://-->
<!--[if lt IE 9]>
    <script th:src="@{/static/js/html5shiv.js}"></script>
    <script th:src="@{/static/js/respond.min.js}"></script>
    <![endif]-->
<script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    </script>
</head>

<body class="ps-loading">
	<div class="header--sidebar"></div>
	<header class="header">
		<div th:include="~{index :: myheader}"></div>
	</header>
	<div class="header-services">
		<div th:include="~{index :: myhdservices}"></div>
	</div>

	<div class="tupian">

		<a href="/html/rent" target="-blank" title="校园贴吧"> <img
			alt="遵义师范学院" th:src="@{/static/images/background/bxh.jpg}">
		</a> <a href="/html/rent" target="-blank" title="最佳室友"> <img
			alt="合租" th:src="@{/static/images/background/rent.jpg}">
		</a> <a href="/html/car" target="-blank" title="最佳“搭档”"> <img alt="拼车"
			th:src="@{/static/images/background/coCar.jpg}">
		</a>

	</div>

	<div class="option" id="rentcarlist">


		<div class="option1">
			<h3
				style="text-align: center; font-size: 30px; color: #009688; top: 20px;">校园合租</h3>


			<div style="float: left; margin-top: 80px;">
				<form class="xinxi"
					style="font-size: 20px; float: left; padding-left: 120px; padding-top: 100px; line-height: 60px;">
					钟意房型： <input type="radio" name="house">一室一厅一卫 <input
						type="radio" name="house">两室一厅一卫 <input type="radio"
						name="house">三室一厅两卫 <input type="radio" name="house">不限房型
					<br> 合租人数：<input type="radio" name="number" value="one">单人住房
					<input type="radio" name="number" value="two">两人合租 <input
						type="radio" name="number" value="there">三人合租 <input
						type="radio" name="number" value="more">不限人数<br> 理想位置：<SELECT
						style="width: 150; font-size: 18px;" name="state">
						<OPTION id="adress" value="">遵义市</OPTION>
						<OPTION id="adress" value="1">红花岗区</OPTION>
						<OPTION id="adress" value="2">汇川区</OPTION>
						<OPTION id="adress" value="3">林达阳光城</OPTION>
						<OPTION id="adress" value="4">贵阳市</OPTION>
						<OPTION id="adress" value="5">云岩区</OPTION>
						<OPTION id="adress" value="6">观山湖区</OPTION>
					</SELECT> <br>
					<a href="/html/rent">
					<button
						style="color: #009688; border: 1px #009688 solid; border-radius: 30px; margin-top: 20px; width: 180px;" @click="getrent()">查找房源>></button>
				    </a>
				</form>

			</div>
			
			<div id="hot-house"  v-for="rent in rents">
        <h2 class="hot-title">热推房源<a href="" class="hot-icon">hot</a>
        
        </h2>
        <ul class="hot-house-wrap">
        
            <li class="hot-house-li">
                <a href="" >
                    <div class="pic-wrap">
                        <img alt="合租" th:src="@{/static/images/background/rent.jpg}">
                    </div>
                    <div class="detail-info" style="height:81px;">
                        <h3>汇川&nbsp;/&nbsp;上海路&nbsp;/&nbsp;安厦壹品龙腾</h3>
                        <div class="house-type">1室&nbsp;&nbsp;&nbsp;&nbsp;56平</div>
                        <div class="price">1200元/月</div>
                    </div>
                </a>
            </li>
        </ul></div>

		</div>



		<div class="option2">
			<h3
				style="text-align: center; font-size: 30px; color: #009688; top: 20px;">校园拼车</h3>
			
			<div id="hot-house" v-for="car in cars">
        <h2 class="hot-title">最佳归档<a href="" class="hot-icon">hot</a>
        
        </h2>
        <ul class="hot-house-wrap">
        
            <li class="hot-house-li">
                <a href="" >
                    <div class="pic-wrap">
				<img alt="拼车" th:src="@{/static/images/background/coCar.jpg}">
                    </div>
                    <div class="detail-info" style="height:81px;">
                        <h3>遵义师范学院北门 &nbsp;-->&nbsp;遵义站</h3>
                        <div class="house-type">2021.6.23&nbsp;&nbsp;&nbsp;&nbsp;13:45</div>
                        <div class="price">2人拼</div>
                    </div>
                </a>
            </li>
        </ul></div>
			<div
				style="float: left; padding-left: 250px; padding-top: 100px; margin-top: 80px;">
				<form class="xinxi" style="font-size: 20px; line-height: 60px;">
					出发地： <input type="radio" name="departure">遵义师范学院西门 <input
						type="radio" name="departure">遵义师范学院北门 <input type="radio"
						name="departure">遵义师范学院东门<br> 出发时间： <SELECT
						style="width: 150; font-size: 18px;" name="state">
						<OPTION id="time" value="">7:00-8:00</OPTION>
						<OPTION id="time" value="1">8:00-9:00</OPTION>
						<OPTION id="time" value="2">9:00-10:00</OPTION>
						<OPTION id="time" value="3">10:00-11:00</OPTION>
						<OPTION id="time" value="4">12:00-13:00</OPTION>
						<OPTION id="time" value="5">13:00-14:00</OPTION>
						<OPTION value="6">14:00-15:00</OPTION>
						<OPTION value="7">15:00-16:00</OPTION>
						<OPTION value="8">16:00-17:00</OPTION>
						<OPTION value="9">17:00-18:00</OPTION>
						<OPTION value="10">18:00-19:00</OPTION>
						<OPTION value="11">19:00-20:00</OPTION>
						<OPTION value="12">20:00-21:00</OPTION>
						<OPTION value="13">21:00-22:00</OPTION>
					</SELECT> <br> 目的地：<SELECT style="width: 150; font-size: 18px;"
						name="state">
						<OPTION id="destination" value="">遵义站</OPTION>
						<OPTION id="destination" value="1">遵义西站</OPTION>
						<OPTION id="destination" value="2">高铁客运站</OPTION>
						<OPTION id="destination" value="3">忠庄客运站</OPTION>
					</SELECT> <br>
					
					<a href="/html/car">
					<button
						style="color: #009688; border: 1px #009688 solid; border-radius: 30px; margin-top: 20px; width: 180px;">开启拼车之旅>></button>
				   </a>
				</form>

			</div>
		</div>


	</div>

	<!-- JS Library-->
	<script type="text/javascript"
		th:src="@{/static/plugins/bootstrap/dist/js/bootstrap.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery-bar-rating/dist/jquery.barrating.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/owl-carousel/owl.carousel.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/plugins/gmap3.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/imagesloaded.pkgd.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/isotope.pkgd.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/bootstrap-select/dist/js/bootstrap-select.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery.matchHeight-min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/slick/slick/slick.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/elevatezoom/jquery.elevatezoom.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/Magnific-Popup/dist/jquery.magnific-popup.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery-ui/jquery-ui.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/jquery.themepunch.tools.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/jquery.themepunch.revolution.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.video.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.navigation.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.parallax.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.actions.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.migration.min.js}"></script>
	<!-- Custom scripts-->
	<script type="text/javascript" th:src="@{/static/js/main.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/common/rentCar.js}"></script>
</body>
</html>
